<template>
  <div>
    <div class="wrap">
      <div class="msg-wrap">
        <div class="item">
          <div class="head">基本信息</div>
          <div class="list">
            <span class="title">订单编号：</span><span class="text">3234234</span><span class="other">团</span>
          </div>
          <div class="list">
            <span class="title">订单状态：</span><span class="text">订单状态</span>
          </div>
          <div class="list">
            <span class="title">购买用户：</span><span class="text">点秋...</span>
          </div>
          <div class="list">
            <span class="title">下单时间：</span><span class="text">2017-8-12 15:12:12</span>
          </div>
          <div class="list">
            <span class="title">支付方式：</span><span class="text">app支付</span>
          </div>
          <div class="list">
            <span class="title">付款时间：</span><span class="text">待付款</span>
          </div>
          <div class="list">
            <span class="title">发货时间：</span><span class="text">未发货</span>
          </div>
          <div class="list">
            <span class="title">发货单号：</span><span class="text">未发货</span>
          </div>
        </div>
        <div class="item">
          <div class="list">
            <span class="title">用户留言：</span><span class="text">下一场小雨让我去漫步--朦朦如梦、似真似梦，一丝冰冷甘甜痛楚的心</span>
          </div>
        </div>
        <div class="item">
          <div class="head">收件人信息</div>
          <div class="list">
            <span class="title">姓名：</span><span class="text">殇</span>
          </div>
          <div class="list">
            <span class="title">手机号：</span><span class="text">177273423423</span>
          </div>
          <div class="list">
            <span class="title">收货地址：</span><span class="text">未来，你不再有出现，真的永远不再拥有</span>
          </div>
          <div class="list">
            <span class="title">取货地址：</span><span class="text">点点甜心泪</span>
          </div>
        </div>
        <div class="item">
          <div class="head">商品信息</div>
          <el-table :data="tableData" border>
            <el-table-column prop="name" label="商品名称" min-width="140" />
            <el-table-column prop="orderNo" label="货号" min-width="100" />
            <el-table-column prop="price" label="价格" min-width="80" />
            <el-table-column prop="num" label="数量" min-width="60" />
            <el-table-column prop="sku" label="规格" min-width="120" />
            <el-table-column prop="savle" label="库存" min-width="60" />
            <el-table-column prop="total" label="小计" min-width="60" />
          </el-table>
          <div class="list" style="margin-top: 10px;"><span class="title">合计：</span><span class="text">{{comConfig.mark}}75.00</span></div>
        </div>
        <div class="item">
          <div class="head">费用信息</div>
          <div class="list">
            商品总金额 {{comConfig.mark}}75.00 + 配送费用 {{comConfig.mark}}0.00 - 已付款金额 {{comConfig.mark}}0.00 - 使用优惠券 {{comConfig.mark}}0.00 = 应付款金额：{{comConfig.mark}}300.00
          </div>
          
        </div>
      </div>
      <div class="set-wrap">
        <div class="title">订单更新</div>
        <el-timeline :reverse="true">
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :timestamp="activity.timestamp +' 申佳 提交 待发货'" placement="top">
            <div class="box-card">订单状态：已确认----已付款----已发货</div>
            <div class="content">备注：我不是你的人</div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
    <div class="set-btns">
      <!-- 待付款-待发货-待核销-（待评价、已完成、已取消、已退款） -->
      <el-button type="primary" @click="setContent()">付款</el-button>
      <el-button type="primary">设为未付款</el-button>
      <span class="fuast">
        <el-select v-model="orderRun.type" placeholder="请选择">
          <el-option label="中通快递" :value="1" >
          </el-option>
        </el-select>
        <el-input style="width: 200px;margin: 0 15px;" 
          v-model="orderRun.orderNo" type="text" placeholder="请输入快递单号" />
        <el-button type="primary">一键发货</el-button>
        <el-button type="primary">生成发货单</el-button>
      </span>
      <el-button type="primary">付款</el-button>
      <el-button type="primary">未发货</el-button>
      <el-button type="primary">已收货</el-button>
      <el-button type="primary">售后</el-button>
      <el-button type="primary" @click="refund()">退款</el-button>
    </div>
    <el-dialog title="退款设置" v-dialogDrag :visible.sync="dialogTableVisible" width="600px" :close-on-press-escap="true">
      <el-form :model="params" ref="ruleForm" label-width="120px" size="small">
        <el-form-item label="退款金额" prop="price" :rules="[{ required: true, message: '请输入退款金额', trigger: 'blur' }]">
          <el-input-number type="number" v-model="params.price" :precision="2" />
        </el-form-item>
        <el-form-item label="运费" prop="freight">
          <el-input-number type="number" v-model="params.freight" :precision="2" />
        </el-form-item>
         <el-form-item label="是否退运费" prop="freight">
          <el-radio v-model="params.IsBackFreight" :label="1">退运费</el-radio>
          <el-radio v-model="params.IsBackFreight" :label="2">不退运费</el-radio>
        </el-form-item>
        <el-form-item label="退款说明" prop="content">
          <el-input type="textarea" v-model="params.content" maxlength="10" placeholder="请输入退款说明" />
        </el-form-item>
        <el-form-item label="退款备注" prop="content">
          <el-input type="textarea" v-model="params.content" maxlength="10" placeholder="请输入退款备注" />
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button type="primary" :loading="isloadingUpdate" @click="submitForm('ruleForm')">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      params: { // 退款参数
        price: undefined,
        IsBackFreight: 1,
        freight: undefined,
        content: ''
      },
      orderRun: {
        orderNo: '',
        type: 1
      },
      tableData: [{ name: '一夜长大', orderNo: 21342342234234, price: 3333.00, sku: '红色/套餐一/4G', savle: 213423, total: 123 }],
      activities: [{
        content: '活动按期开始',
        timestamp: '2018-04-15'
      }, {
        content: '通过审核',
        timestamp: '2018-04-13'
      }, {
        content: '用户下单',
        timestamp: '2018-04-11'
      }],
      dialogTableVisible: true,
      isloadingUpdate: false
    }
  },
   methods: {
    refund() { // 退款

    },
    setContent() { // 操作备注
      this.$prompt('备注', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.$message({
          type: 'success',
          message: '你的邮箱是: ' + value
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });      
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {

        } else {

        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .wrap{
    max-width: 1400px;
    min-width: 1200px;
    margin: 20px auto;
    display: flex;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    .msg-wrap{
      flex: 1;
      border-right: 1px solid #ccc;
      .item{
        padding:10px;
        border-bottom: 1px solid #ccc;
        &:last-child{
          border-bottom: none;
        }
        .head{
          height: 34px;
          line-height: 34px;
          font-weight: 600;
        }
        .list{
          line-height: 24px;
          .title{
            color: #666;
          }
          .text{
            color: 333;
          }
          .other{
            margin-left: 10px;
            color: red;
          }
        }
      }
    }
    .set-wrap{
      width: 300px;
      padding: 10px;
      .title{
        height: 34px;
        line-height: 34px;
      }
    }
  }
  .set-btns{
    max-width: 1400px;
    min-width: 1200px;
    margin: 0 auto;
    display: flex;
    padding-bottom: 50px;
    .fuast{
      display: flex;
      align-items: center;
      margin: 0 15px;
    }
  }
</style>